/*
Blogger Template Style
Name     : OmG :]
Designer : Syauqi A
URL      : http://omaygod.blogspot.com
*/

/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
body,.body-fauxcolumn-outer { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
/* FRAMEWORK START */
body,.body-fauxcolumn-outer { background-color:white; color:#333; }
strong,b { font-weight:bold; }
cite,em,i { font-style:italic; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
a img { border:none; }
abbr,acronym { border-bottom:1px dotted; cursor:help; }
sup,sub { vertical-align:baseline; position:relative; top:-.4em; font-size:86%; }
sub { top:.4em; }
small { font-size:86%; }
kbd { font-size:80%; border:1px solid #999; padding:2px 5px; border-bottom-width:2px; border-radius:3px; }
mark { background-color:#ffce00; color:black; }
p,blockquote,pre,table,figure,hr,form,ol,ul,dl { margin:1.5em 0; }
hr { height:1px; border:none; background-color:#666; }
h1,h2,h3,h4,h5,h6 { font-weight:bold; line-height:normal; margin:1.5em 0 0; }
h1 { font-size:200%; }
h2 { font-size:180%; }
h3 { font-size:160%; }
h4 { font-size:140%; }
h5 { font-size:120%; }
h6 { font-size:100%; }
ol,ul,dl { margin-left:3em; }
ol { list-style:decimal outside; }
ul { list-style:disc outside; }
li { margin:.5em 0; }
dt { font-weight:bold; }
dd { margin:0 0 .5em 2em; }
input,button,select,textarea { font:inherit; font-size:100%; line-height:normal; vertical-align:baseline; }
textarea { display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
pre,code { font-family:"Courier New",Courier,Monospace; color:inherit; }
pre { white-space:pre; word-wrap:normal; overflow:auto; }
blockquote { margin-left:2em; margin-right:2em; border-left:4px solid #ccc; padding-left:1em; font-style:italic; }
table[border="1"] th,table[border="1"] td,table[border="1"] caption { border:1px solid; padding:.5em 1em; text-align:left; vertical-align:top; }
th { font-weight:bold; }
table[border="1"] caption { border:none; font-style:italic; }
/* Font-Face */
@font-face { font-family:"JournalRegular"; src:url(http://metalcartoon.com/wp-content/themes/kimzigr/font/journal-webfont.ttf) format("truetype"); }
#navbar-iframe { display:none !important; }
header,nav,section,aside,article,footer { display:block; }
/* Global */
body, .body-fauxcolumn-outer { font:normal normal 13px/1.4 "Roboto_Condensed","Helvetica Neue",Tahoma,Verdana,Arial,Sans-Serif; color:#eee; margin:0 auto; background:#333; }
a:link { color:#555; text-decoration:none; }
a:hover { color:#eee; text-decoration:underline; }
a:visited { color:#666; text-decoration:none; }
::selection { background:#eee; text-shadow:0; color:#333; }
a img { border-width:0; }
/* Header */
#header-wrapper { margin:0 auto 0; color:black; }
#header {}
#header h1 { color:#777; text-align:center; font-size:115px; margin:10px; }
#header .description { font-size:115%; text-align:center; }
/* Nav */
#nav { font-weight:bold; border-bottom:1px solid #333; border-top:1px solid #333; background:#555; }
#nav ul { height:30px; margin:0; padding:0; }
#nav li { list-style:none; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin:0; padding:0; }
#nav li a { display:block; line-height:30px; text-decoration:none; color:black; padding:0 15px; -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; -ms-transition:all 0.4s ease-out; -o-transition:all 0.4s ease-out; transition:all 0.4s ease-out; }
#nav li a:hover { color:white; background-color:#222; }
/* Wrapper */
#outer-wrapper { display:block; overflow:hidden; width:690px; margin:0 auto; background:#444; border:1px solid #3c3c3c; box-shadow:0 0 5px rgba(0,0,0,.7); }
#main-wrapper{width:auto; padding:2%; word-wrap:break-word;
/* fix for long text breaking sidebar float in IE */
overflow:hidden;
/* fix for long non-text content breaking IE sidebar float */}
/* Headings */
h2 { margin:1.5em 0 .75em; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:#eee; }
/* Post */
h2.date-header { display:none; }
.post { margin:.5em 0 1.5em; padding-bottom:1.5em; }
.post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; }
.post h3 a,.post h3 a:visited,.post h3 strong { display:block; text-decoration:none; font-weight:normal; }
.post .post-title,.post h3 strong,.post h3 a:hover { color:#eee; }
.post .post-title,.post h3 strong,.post h3 { -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; -ms-transition:all 0.4s ease-out; -o-transition:all 0.4s ease-out; transition:all 0.4s ease-out; }
.post .post-title { font-size:20px; line-height:20px; display:none; background:#222; padding:10px; -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; -ms-transition:all 0.4s ease-out; -o-transition:all 0.4s ease-out; transition:all 0.4s ease-out; }
.post .post-title:hover { background:#333; -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out; -ms-transition:all 0.4s ease-out; -o-transition:all 0.4s ease-out; transition:all 0.4s ease-out; }
.post-body { margin:0 0 .75em; line-height:1.6em; }
.post-body blockquote { line-height:1.3em; }
.post-footer { margin:.75em 0; color:#000; letter-spacing:.1em; border-bottom:1px solid #555; line-height:21px; }
.post-body img { background:none repeat scroll 0 0 #F7F7F7; border:1px solid #555; box-shadow:3px 3px 0 0 #777; -o-box-shadow:3px 3px 0 0 #777; -moz-box-shadow:3px 3px 0 0 #777; -webkit-box-shadow:3px 3px 0 0 #777; padding:10px; max-width:95%; }
.comment-link { margin-$startSide:.6em; }
.post img,table.tr-caption-container { border:1px solid $bordercolor; }
.tr-caption-container img { border:none; padding:0; }
.post blockquote { margin:1em 20px; }
.post blockquote p { margin:.75em 0; }
/* Comments */
#comments h4 { display:block; padding:5px; line-height:30px; }
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment { position:relative; }
#comments h4 { background:rgba(35,35,35,0.2); text-align:center; }
#comments h4,.comments .user a { font-size:14px; }
#comments h4 { font-weight:normal; color:#fff; }
#comments h4:after { content:""; position:absolute; bottom:-10px; left:20px; width:0; height:0; border-style:solid; border-width:10px 7.5px 0 7.5px; border-color:rgba(35,35,35,0.2) transparent transparent transparent; line-height:0; }
#comments { box-shadow:0 8px 1px -4px rgba(0,0,0,0.8); -moz-box-shadow:0 8px 1px -4px rgba(0,0,0,0.8); -webkit-box-shadow:0 8px 1px -4px rgba(0,0,0,0.8); background:#1D1D1D; margin-bottom:10px; min-height:100px; padding-bottom:25px; padding-right:20px; padding-left:20px; color:#636363; }
.comments .thread-toggle { margin-bottom:10px; }
.comments .comment-thread.inline-thread .comment .comment-block { margin-left:52px; }
.comments .comment-thread.inline-thread .comment{margin:0 0 5px 30%;
/* Level 6+ */
background-color:#222; border:1px solid #333; padding:10px 15px; color:#ccc}
.comment .comment-thread.inline-thread .comment:nth-child(6) { margin:0 0 5px 25%; }
/* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) { margin:0 0 5px 20%; }
/* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) { margin:0 0 5px 15%; }
/* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) { margin:0 0 5px 10%; }
/* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) { margin:0 0 5px 5%; }
/* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) { margin:0 0 5px 0%; }
/* Level 1 */
.comment-form { max-width:100%; width:100%; clear:both; }
#blog-pager { font-size:10px; color:#999; text-transform:uppercase; line-height:16px; background-color:#333; padding:11px 18px; margin:0; }
#form-wrapper p { padding:7px 10px 7px 10px; margin:10px 0 10px 0; color:#929292; font-size:13px; line-height:20px; width:94.5%; background:#232528; border:1px solid #414449; box-shadow:1px 1px 0 #1A1C1F; }
.pagenavi { width:100%; position:relative; text-align:center; margin:0 0 30px; padding:30px 0; clear:both; z-index:10; line-height:36px; }
.feed-links { display:none; }
/* Footer */
#footer-wrapper { width:auto; clear:both; padding:2%; color:#000; border-top:1px solid #000; text-transform:uppercase; letter-spacing:.1em; text-align:center; display:block; }
.credit { float:left; font-size:10px; }
img { max-width:100%; height:auto; width:auto\9; }
/* Sistem Grid WiQi */
.bersih { clear:both; display:block; overflow:hidden; }
.grid { width:100%; margin:0; overflow:hidden; }
.wq1 { width:6.25%; }
.wq2 { width:14.583333333333334%; }
.wq3 { width:22.916666666666664%; }
.wq4 { width:31.25%; }
.wq5 { width:39.58333333333333%; }
.wq6 { width:47.91666666666667%; }
.wq7 { width:56.25%; }
.wq8 { width:64.58333333333334%; }
.wq9 { width:72.91666666666666%; }
.wq10 { width:81.25%; }
.wq11 { width:89.58333333333334%; }
.wq12 { width:97.91666666666666%; }
.wq1,.wq2,.wq3,.wq4,.wq5,.wq6,.wq7,.wq8,.wq9,.wq10,.wq11,.wq12 { display:inline; float:left; margin:0 1.0416666666666665%; }
@media screen and (max-width:720px) {
.wq1,.wq2,.wq3,.wq4,.wq5,.wq6,.wq7,.wq8,.wq9,.wq10,.wq11,.wq12 { width:97.91666666666666%; margin-bottom:1em; }
}
code { font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace; line-height:16px; color:#333; font-size:12px; }
/* Blockquote */
blockquote,b[rel="quote"] { display:block; position:relative; background-color:#445787; color:white; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:.75em 0; padding:10px 15px; }
blockquote a,blockquote a:visited,blockquote a:hover,blockquote code,b[rel="quote"] a,b[rel="quote"] a:hover { color:#FFEAE5 !important; background:none; text-shadow:none; }
blockquote:before,b[rel="quote"]:before { content:""; width:0; height:0; position:absolute; bottom:100%; right:15px; border:7px solid transparent; border-color:transparent transparent #445787; }
/* button */
.button { float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both; }
.button ul { margin:0; padding:0; }
.button li { display:inline; margin:0; padding:0; }
.demo { border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 80px !important; background:#E55E48; color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0,0,0,0.3); -webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); -moz-text-shadow:0 0 1px rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px rgba(0,0,0,0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px; }
.download { border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 80px !important; background:#5FAAE3; color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0,0,0,0.3); -webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); -moz-text-shadow:0 0 1px rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px rgba(0,0,0,0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px; }
.demo:hover { background:#454242; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222; }
.download:hover { background:#454242; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222; }
/* Syntax Highlighter */
pre { padding:.5em 1em; margin:.5em 0; white-space:pre; word-wrap:normal; overflow:auto; background-color:#1B2426; }
code { font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace; line-height:16px; color:#B43D3D; background-color:#eee; border:1px solid #ddd; padding:1px 2px; }
pre code { display:block; background:none; border:none; color:#B9BDB6; direction:ltr; text-align:left; word-spacing:normal; padding:0 0; }
code .token.punctuation { color:#83405A; }
pre code .token.punctuation { color:#B9BDB6; }
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata { color:#435A4D; }
code .namespace { opacity:.8; }
code .token.property,code .token.tag,code .token.boolean,code .token.number { color:#5BA1CF; }
code .token.selector,code .token.attr-name,code .token.string { color:#986A7C; }
pre code .token.selector,pre code .token.attr-name,pre code .token.string { color:#E0E8FF; }
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string { color:#E0E8FF; }
code .token.operator { color:#878A85; }
code .token.atrule,code .token.attr-value { color:#48D30F; }
pre code .token.atrule,pre code .token.attr-value { color:#48E638; }
code .token.keyword { color:#47A1CF; font-style:italic; }
code .token.comment { font-style:italic; }
code .token.regex { color:#B43D3D; }
code .token.important { font-weight:bold; }
code .token.entity { cursor:help; }
/* PESAN */
.info { background-color:#DFF2BF; color:#4F8A10; }
.warning { background-color:#FFBABA; color:#D8000C; }
.info,.warning { border:1px solid; padding:.8em 1em; margin:1.5em 0; }
/* RESPONSIVE */
@media screen and (max-width:1024px) {
#outer-wrapper { width:100%; }
}
@media screen and (max-width:740px) {
#main-wrapper,#sidebar-wrapper { float:none; display:block; width:auto; padding:5%; } #sidebar-wrapper .widget-content { margin:0 0 10px; padding:0; }
}
@media screen and (max-width:570px) {
#header h1 { font-size:170%; }
}